﻿@{
    var value = new object[] {
        new object[] { "Product_Current_Inventory", FilterBuilderFieldFilterOperations.NotEqual, 0 },
        "or",
        new object[] {
            new object[] { "Product_Name", FilterBuilderFieldFilterOperations.Contains, "HD" },
            "and",
            new object[] { "Product_Cost", FilterBuilderFieldFilterOperations.LessThan, 200 }
        }
    };
}

<div class="filter-container">
    @(Html.DevExtreme().FilterBuilder()
        .ID("filterBuilder")
        .Fields(fields => {
            fields.Add()
                .DataField("Product_ID")
                .Caption("ID")
                .DataType(FilterBuilderFieldDataType.Number);

            fields.Add()
                .DataField("Product_Name");

            fields.Add()
                .Caption("Cost")
                .DataField("Product_Cost")
                .DataType(FilterBuilderFieldDataType.Number)
                .Format(Format.Currency);

            fields.Add()
                .DataField("Product_Sale_Price")
                .Caption("Sale Price")
                .DataType(FilterBuilderFieldDataType.Number)
                .Format(Format.Currency);

            fields.Add()
                .DataField("Product_Retail_Price")
                .Caption("Retail Price")
                .DataType(FilterBuilderFieldDataType.Number)
                .Format(Format.Currency);

            fields.Add()
                .DataField("Product_Current_Inventory")
                .Caption("Inventory");
        })
        .Value(value)
    )

    @(Html.DevExtreme().Button()
        .Text("Apply Filter")
        .Type(ButtonType.Default)
        .OnClick("applyFilter")
    )
    <div class="dx-clearfix"></div>
</div>

@(Html.DevExtreme().DataGrid()
    .ID("dataGrid")
    .DataSource(d => d.OData()
        .Url("https://js.devexpress.com/Demos/DevAV/odata/Products")
        .Key("Product_ID")
        .FieldTypes(new Dictionary<string, EdmType> {
            { "Product_Cost", EdmType.Decimal },
            { "Product_Sale_Price", EdmType.Decimal },
            { "Product_Retail_Price", EdmType.Decimal }
        })
    )
    .DataSourceOptions(d => d.Select(new[] {
            "Product_ID",
            "Product_Name",
            "Product_Cost",
            "Product_Sale_Price",
            "Product_Retail_Price",
            "Product_Current_Inventory"
        })
    )
    .FilterValue(value)
    .ShowBorders(true)
    .Columns(columns => {
        columns.Add()
            .DataField("Product_ID")
            .Width(50)
            .Caption("ID")
            .DataType(GridColumnDataType.Number);

        columns.Add()
            .DataField("Product_Name");

        columns.Add()
            .Caption("Cost")
            .DataField("Product_Cost")
            .DataType(GridColumnDataType.Number)
            .Format(Format.Currency);

        columns.Add()
            .DataField("Product_Sale_Price")
            .Caption("Sale Price")
            .DataType(GridColumnDataType.Number)
            .Format(Format.Currency);

        columns.Add()
            .DataField("Product_Retail_Price")
            .Caption("Retail Price")
            .DataType(GridColumnDataType.Number)
            .Format(Format.Currency);

        columns.Add()
            .DataField("Product_Current_Inventory")
            .Caption("Inventory");
    })
    .Height(300)
)

<script>
    function applyFilter(data) {
        var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value");
        $("#dataGrid").dxDataGrid("instance").option("filterValue", filter);
    }
</script>
